<template>
  <el-card style="width: 80%; margin: 0 auto">
    <el-tabs v-model="activeTab" type="border-card">
      <!-- 成交基础信息 -->
      <el-tab-pane label="审核信息" name="base">
        <TcFormDetail
          v-if="openData && approveType == 'transaction'"
          :key="tcFormDetail?.id"
          :msgData="tcFormDetail"
        />
        <RefundDetail
          v-if="openData && approveType == 'refundOrder'"
          :key="tcFormDetail?.id"
          :msgData="tcFormDetail"
        />
        <newspaperDetails
          v-if="openData && approveType == 'completed'"
          :key="tcFormDetail?.id"
          :msgData="tcFormDetail"
        ></newspaperDetails>
        <invoiceDetail
          v-if="openData && approveType == 'invoice'"
          :key="tcFormDetail?.id"
          :msgData="tcFormDetail"
        ></invoiceDetail>
      </el-tab-pane>

      <!-- 成交分成信息 -->
      <el-tab-pane label="流转记录" name="divide">
        <SendProcess
          v-if="openData"
          :key="process?.id"
          :processData="process"
        />
      </el-tab-pane>
    </el-tabs>

    <!-- 操作按钮 -->
    <div class="actions" v-if="activeTab == 'base' && isShen != 1">
      <el-button :loading="subLoad" type="primary" @click="submit"
        >去审核</el-button
      >
    </div>
    <el-dialog v-model="open" width="500px" append-to-body>
      <el-form ref="postRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="审核状态" prop="isProcess">
          <el-radio-group v-model="form.isProcess">
            <el-radio label="通过" :value="1"></el-radio>
            <el-radio label="驳回" :value="2"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="退回选项"
          prop="processType"
          v-if="form.isProcess == 2"
        >
          <el-select v-model="form.processType" placeholder="请选择">
            <el-option label="退回给发起人" :value="1"> </el-option>
            <el-option label="退回上一级" :value="2"> </el-option>
            <el-option label="退回到指定岗位" :value="3"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="指定岗位"
          prop="userPostId"
          v-if="form.processType == 3 && form.isProcess == 2"
        >
          <el-select v-model="form.userPostId" placeholder="请选择">
            <el-option
              v-for="item in postList"
              :key="item.postId"
              :label="item.postName"
              :value="item.postId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="驳回原因"
          prop="checkRemark"
          v-if="form.isProcess == 2"
        >
          <el-input
            type="textarea"
            v-model="form.checkRemark"
            placeholder="请输入驳回原因"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup name="TodoDetail">
import { ref, onMounted } from "vue";
import { transactionConfirm } from "@/api/business/tcForm";
import { querySending } from "@/api/task/sending";
import { queryRefund } from "@/api/business/refund";
import { queryNewspaperDetail } from "@/api/dailyNewspaper/addDetails";
import { submitReview, userPostList, getinvoiceDetail } from "@/api/task/todo";
import TcFormDetail from "@/views/business/tcForm/components/TcFormDetail.vue";
import RefundDetail from "@/views/business/refund/components/refundDetail.vue";
import SendProcess from "@/views/task/components/SendProcess.vue";
import newspaperDetails from "../../dailyNewspaper/addDetails/components/newspaperDetails.vue";
import invoiceDetail from "@/views/task/components/invoiceDetail.vue";

const { proxy } = getCurrentInstance();
const route = useRoute();
// 当前激活 tab
const activeTab = ref("base");
const tcFormDetail = ref({});
const open = ref(false);
const form = ref({});
const router = useRouter();
const isShen = ref(route.query.isProcess);
const rules = ref({
  isProcess: [
    {
      required: true,
      message: "请选择审核状态",
      trriger: "click",
      type: "number",
    },
  ],
  processType: [
    {
      required: true,
      message: "请选择退回选项",
      trriger: "change",
      type: "number",
    },
  ],
  userPostId: [
    {
      required: true,
      message: "请选择退回选项",
      trriger: "change",
      type: "number",
    },
  ],
  checkRemark: [
    {
      required: true,
      message: "请填写驳回原因",
      trriger: "blur",
    },
  ],
});
const postList = ref([]);
function getPostList() {
  const approveContentId = route.query.approveContentId;
  userPostList({ approveContentId }).then((res) => {
    console.log(res.data);
    postList.value = res.data;
  });
}
const openData = ref(false);
function getSendDetail() {
  const id = route.query.operationId;
  transactionConfirm(id).then((res) => {
    tcFormDetail.value = res.data;
    openData.value = true;
  });
}
function getRefundDetail() {
  const id = route.query.operationId;
  queryRefund(id).then((response) => {
    tcFormDetail.value = response.data;
    openData.value = true;
  });
}
function getNewsPaperDetail() {
  const id = route.query.operationId;
  queryNewspaperDetail(id).then((response) => {
    tcFormDetail.value = response.data;
    openData.value = true;
  });
}
// 获取发票详情
function getInvoiceDetail() {
  const id = route.query.operationId;
  getinvoiceDetail(id).then((response) => {
    tcFormDetail.value = response.data;
    openData.value = true;
  });
}
const approveType = ref(route.query.approveType);
onMounted(() => {
  if (approveType.value == "transaction") {
    //成交确认单
    getSendDetail();
  } else if (approveType.value == "refundOrder") {
    //退款订单
    getRefundDetail();
  } else if (approveType.value == "completed") {
    getNewsPaperDetail();
  } else if (approveType.value == "invoice") {
    getInvoiceDetail();
  }
});
const process = ref({});
function sendProcess() {
  const id = route.query.approveContentId;
  querySending(id).then((res) => {
    process.value = res.data;
  });
}
sendProcess();
function reset() {
  form.value = {
    isProcess: 1,
    checkRemark: "",
  };
}
function submit() {
  open.value = true;
  getPostList();
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["postRef"].validate((valid) => {
    if (valid) {
      form.value.id = route.query.id;
      submitReview(form.value).then((response) => {
        proxy.$modal.msgSuccess("提交成功");
        open.value = false;
        reset();
        router.push({
          path: "audited",
        });
      });
    }
  });
}
</script>

<style scoped>
.actions {
  text-align: right;
  margin-top: 20px;
}
</style>
